<html xmlns:th="http://www.thymeleaf.org" >
<head th:include="layout :: htmlhead" th:with="title='favorites'"></head>
<body>
<script th:src="@{/vendor/jquery/dist/jquery.js}"></script>
<script th:src="@{/index/js/freelancer.min.js}"></script>
<link href="../../index/css/freelancer.min.css" rel="stylesheet" />

    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="/index">云收藏</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <!--<li>
                        <a href="/lookAround/standard/ALL">随便看看</a>
                    </li>-->
                    <li>
                        <a href="/login" th:unless="${user != null}">登录</a>
                        <a href="/" th:if="${user != null}" th:text="${user.userName}" class="userName"></a>
                    </li>
                    <li>
                        <a href="/feedback">提建议</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <script>
        (function($) {
          $('body').scrollspy({
              target: '.navbar-fixed-top',
              offset: 51
          });
          $('#mainNav').affix({
              offset: {
                  top: 100
              }
          })
        })(jQuery);
      </script>
        <!-- /.container-fluid -->
    </nav>
    <section>
        <div class="content-wrapper">
            <h3>意见反馈</h3>
            <div class="container-fluid">
                <div class="row">
                    <form id="feedback-form" action="#">
                        <div class="col-md-3"></div>
                        <div class="col-md-6">
                            <div class="panel">
                                <div class="panel-heading">欢迎给我们留言！</div>
                                <div class="panel-body">
                                    <div id="errorMsg" class="alert alert-danger text-center" style="display:none;"></div>
                                    <div id="successMsg" class="alert alert-success text-center" style="display:none;"></div>
                                    <div class="form-group">
                                        <textarea class="form-control" rows="3" placeholder="请输入您的意见！" id="feedbackAdvice" name="feedbackAdvice" maxlength="1024" onmousedown="closeErrorMsg()"></textarea>
                                    </div>
                                    <div class="form-inline form-inline-feedback">
                                        <div class="form-group">
                                            <input type="text" th:unless="${user != null}" id="feedbackName" name="feedbackName" maxlength="255" class="form-control" placeholder="怎么称呼您" onmousedown="closeErrorMsg()"></input>
                                            <input type="text" th:if="${user != null}" id="feedbackName" th:value="${user.userName}" name="feedbackName" maxlength="255" class="form-control" placeholder="怎么称呼您" onmousedown="closeErrorMsg()"></input></div>
                                        <div class="form-group">
                                            <input type="text" th:unless="${user != null}" id="phone" name="phone" maxlength="255" class="form-control" placeholder="您的联系方式" onmousedown="closeErrorMsg()"></input>
                                            <input type="text" th:if="${user != null}" id="phone" th:value="${user.email}" name="phone" maxlength="255" class="form-control" placeholder="您的联系方式" onmousedown="closeErrorMsg()"></input></div>
                                    </div>
                                </div>
                            </div>
                            <div id="saveFeedbackBtn" class="btn btn-primary btn-block" onclick="saveFeedBack()">提交</div>
                        </div>
                        <div class="col-md-3"></div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <style>
      .form-inline-feedback{ display: flex;justify-content:space-between; }
      .form-inline-feedback .form-group{ width: 49%; }
      .form-inline-feedback .form-control{ width: 100%; }
    </style>
    <script type='text/javascript' th:inline="javascript">

        function saveFeedBack(){
            var feedbackAdvice = document.getElementById("feedbackAdvice").value;
            var feedbackName = document.getElementById("feedbackName").value;
            var phone = document.getElementById("phone").value;
            if(feedbackAdvice==""){
                $("#errorMsg").text("请输入您的反馈意见");
   			    $("#errorMsg").show();
   			    return;
            }
            if(feedbackName==""){
                $("#errorMsg").text("请输入您的名字");
   			    $("#errorMsg").show();
   			    return;
            }
            if(phone==""){
                $("#errorMsg").text("请输入您的联系方式");
   			    $("#errorMsg").show();
   			    return;
            }
            $("#saveFeedbackBtn").attr("disabled","disabled");
   		    $("#errorMsg").hide();
            $.ajax({
   	  	         type: "POST",
   	  	         url:"/feedback/save",
   	  	         data:$("#feedback-form").serialize(),
   	  	         success: function(response) {
   	  	             $("#successMsg").text("谢谢您的宝贵建议，我们将继续改进");
   	  	             $("#successMsg").show();
                     $("#saveFeedbackBtn").removeAttr("disabled");
   	  	         },
   	  	         error: function (jqXHR, textStatus, errorThrown) {
   	  	             $("#saveFeedbackBtn").removeAttr("disabled");
   	  	        	 console.log(jqXHR.responseText);
   	  	        	 console.log(jqXHR.status);
   	  	        	 console.log(jqXHR.readyState);
   	  	        	 console.log(jqXHR.statusText);
   	  	             console.log(textStatus);
   	  	             console.log(errorThrown);
   	  	         }
   	  	    });
        }
        function closeErrorMsg(){
            $("#successMsg").hide();
            $("#errorMsg").hide();
        }

    </script>
</body>
</html>